<template>
    <button @click="toggle" class="gulu-switch" :class="{'gulu-checked':value}"><span></span></button>
    <div>{{ value }}</div>
</template>
<script lang="ts">
import { ref } from 'vue';

export default {
    props: {
        value: Boolean
    },
    setup(props, context) {
        const toggle = () => {
            context.emit('update:value', !props.value)
        }
        return { toggle }
    }
}
</script>

<style lang="scss" >
$h: 22px;
$h2: $h - 4px;

.gulu-switch {
    height: $h;
    width: $h*2;
    border: none;
    background: #bfbfbf;
    border-radius: 11px;
    position: relative;
    z-index: 1;

    >span {
        position: absolute;
        top: 2px;
        left: 2px;
        height: $h2;
        width: $h2;
        background: white;
        border-radius: 9px;
        transition: all 250ms;
    }

    &.gulu-checked {
        background: #1890ff;

        >span {
            left: calc(100% - #{$h2} - 2px);
        }
    }


    &:focus {
        outline: none;
    }

    &:active {
        >span {
            width: 22px;
        }
    }

    &.gulu-checked:active {
        >span {
            width: 22px;
            margin-left: -4px;
        }
    }

}
</style>